<template>
  <div id="app">
    <div class="tool-list-container">
      <!-- 顶部区域 -->
      <div class="top-box">
        <el-input
          v-model.trim="inputVal"
          placeholder="请输入内容"
          clearable
          maxlength="30"
          class="top-input"
        ></el-input>
        <el-button
          type="primary"
          @click="addItemToList"
        >添加事项</el-button>
      </div>

      <!-- 列表区域 -->
      <div
        v-if="filterList.length"
        class="list-box"
      >
        <div
          v-for="(item, index) in filterList"
          :key="index"
          class="item-box"
        >
          <div class="item-left">
            <el-checkbox v-model="item.checked">{{ item.title }}</el-checkbox>
          </div>
          <div
            class="item-right"
            @click="deleteItemById(item.id)"
          >删除</div>
        </div>
      </div>
      <!-- 无数据区域 -->
      <div
        v-else
        class="not-data-box"
      >
        <img src="@/assets/no_data.png">
      </div>

      <!-- 底部区域 -->
      <div class="bottom-box">
        <span>{{ unDoneLength }}条未完成</span>
        <el-button-group>
          <el-button
            :type="btnType === 'all' ? 'primary' : 'default'"
            @click="changeList('all')"
          >全部</el-button>
          <el-button
            :type="btnType === 'undone' ? 'primary' : 'default'"
            @click="changeList('undone')"
          >未完成</el-button>
          <el-button
            :type="btnType === 'done' ? 'primary' : 'default'"
            @click="changeList('done')"
          >已完成</el-button>
        </el-button-group>
        <span
          class="clear-done"
          @click="clear"
        >清除已完成</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'

export default {
  name: 'App',
  computed: {
    ...mapState(['list', 'btnType']),
    ...mapGetters(['unDoneLength', 'filterList'])
  },
  data() {
    return {
      inputVal: ''
    }
  },
  created() {
    this.asyncGetList()
  },
  methods: {
    ...mapMutations(['addItem', 'deleteItem', 'clearDone', 'updateBtnType']),
    ...mapActions(['asyncGetList']),

    // 添加事项
    addItemToList() {
      // 判断是否为空
      if (!this.inputVal) return this.$message.error({ message: '文本框内容不能为空！', duration: 1500 })

      // 判断添加内容是否重复
      let isRepeat = false
      if (this.list.length) {
        this.list.map(item => {
          if (item.title === this.inputVal) isRepeat = true
        })
      }
      if (isRepeat) return this.$message.error({ message: '添加内容已存在！', duration: 1500 })

      const item = {
        id: this.list.length ? this.list[this.list.length - 1].id + 1 : 1,
        title: this.inputVal,
        checked: false
      }
      this.addItem(item)
      this.$message.success({ message: '添加成功！', duration: 1000 })
      this.inputVal = ''
    },

    // 删除
    deleteItemById(id) {
      this.deleteItem(id)
      this.$message.success({ message: '删除成功！', duration: 1000 })
    },

    // 清除已完成
    clear() {
      this.clearDone()
    },

    // 切换
    changeList(type) {
      this.updateBtnType(type)
    }
  }
}
</script>

<style lang="scss" scoped>
#app {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.tool-list-container {
  // 顶部区域
  .top-box {
    display: flex;
    justify-content: space-between;
    width: 800px;

    .top-input {
      width: 650px;
    }
  }

  // 列表区域
  .list-box {
    width: 800px;
    max-height: 602px;
    margin: 20px 0;
    border: 1px solid #d4d7d4;
    border-radius: 5px;
    overflow: auto;

    // 滚动条样式
    &::-webkit-scrollbar {
      width: 5px;
      height: 10px;
      background-color: transparent;
    }
    &::-webkit-scrollbar-track {
      background-color: transparent;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background-color: #c4c6cc;
    }

    .item-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 60px;
      padding: 0 40px;
      border-bottom: 1px solid #d4d7d4;

      .item-left {
        ::v-deep .el-checkbox__inner {
          width: 20px;
          height: 20px;
        }
        ::v-deep .el-checkbox__inner::after {
          left: 7px;
          top: 4px;
        }
        ::v-deep .el-checkbox__label {
          font-size: 16px;
        }
      }

      .item-right {
        color: #3380e1;
        cursor: pointer;
      }
    }
    .item-box:last-child {
      border-bottom: 0;
    }
  }

  // 无数据区域
  .not-data-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 800px;
    height: 360px;
    margin: 20px 0;
    border: 1px solid #d4d7d4;
    border-radius: 5px;
  }

  // 底部区域
  .bottom-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    padding: 0 30px;
    border: 1px solid #d4d7d4;
    border-radius: 5px;

    // 清除已完成
    .clear-done {
      color: #3380e1;
      cursor: pointer;
    }
  }
}
</style>
